import React from 'react';
import { Radio } from 'antd';
import { FieldProps } from '@rjsf/utils';
interface RadioFieldOption {
  value: string;
  label: string;
  style?: React.CSSProperties;
}
export const RadioButtonFields: React.FC<FieldProps> = ({
  formData,
  onChange,
  uiSchema,
}) => {
  const options = uiSchema['ui:options']?.options as RadioFieldOption[];
  const calculatedWidth = (length: number): string => {
    const totalwidth = 100;
    const buttonWidth = totalwidth / length;
    return `${buttonWidth}%`;
  };
  return (
    <Radio.Group
      optionType='button'
      buttonStyle='solid'
      className='w-full text-center'
      onChange={(e) => {
        onChange(e.target.value);
      }}
      defaultValue={formData}>
      {options.map((option) => (
        <Radio.Button
          key={option.value}
          value={option.value}
          style={{ width: calculatedWidth(options.length) }}>
          {option.label}
        </Radio.Button>
      ))}
    </Radio.Group>
  );
};
